<script type="text/javascript" src="/js/pages/roleEdit.js"></script>
<th:block layout:include="fragments/ui :: main (title='角色详细')">
    <th:block layout:fragment="main-breadcrumb">
        <li><a href="#/role.html"><i class="fa fa-user"></i> 角色列表</a></li>
        <li class="active" th:text="${title}"></li>
    </th:block>
    <th:block layout:fragment="main-content">
        <th:block layout:include="fragments/ui :: box (title='角色详细', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <form id="updateRoleForm" class="form-horizontal" method="post">
                    <input type="hidden" class="form-control" id="id" name="id" placeholder="id" th:value="${role.id}" />
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="name" name="name" placeholder="名称" th:value="${role.name}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="info" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="info" name="info" placeholder="描述" th:value="${role.info}" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-4">
                            <select id="status" name="status" class="form-control">
                                <option value="normal" th:selected="${#strings.equals(role.status, 'normal')}">正常</option>
                                <option value="forbidden" th:selected="${#strings.equals(role.status, 'forbidden')}">禁用</option>
                                <option value="deleted" th:selected="${#strings.equals(role.status, 'deleted')}">删除</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"></label>
                        <div class="col-sm-4">
                            <a href="javascript:void(0)" class="btn btn-primary update-btn"><i class="fa fa-check"></i> 保存</a>
                            <a href="javascript:window.history.go(-1)" class="btn btn-default"><i class="fa fa-arrow-left"></i> 返回</a>
                        </div>
                    </div>
                </form>
            </th:block>
        </th:block>

        <th:block layout:include="fragments/ui :: box (title='相关数据', iconClass='fa-bars')">
            <th:block layout:fragment="box-content">
                <ul id="roleRefTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#perm" data-toggle="tab">
                            权限列表
                        </a>
                    </li>
                    <li><a href="#user" data-toggle="tab">用户列表</a></li>

                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="perm">
                        <a type="button" class="btn btn-success add_perm_btn" style="margin-top:5px;"><i class="fa fa-plus"></i> 选择权限</a>
                        <div th:include="fragments/ajax-table :: ajax-table (id=RolePermList, head=${ {'ID', '类型', '名称', '描述'} }, ajaxurl=${'/role/' + role.id + '/perm'})"></div>
                    </div>
                    <div class="tab-pane fade" id="user">
                        <a type="button" class="btn btn-success add_user_btn" style="margin-top:5px;"><i class="fa fa-plus"></i> 选择用户</a>
                        <div th:include="fragments/ajax-table :: ajax-table (id=RoleUserList, head=${ {'ID', '手机', '邮箱', '姓名', '状态'}  }, ajaxurl=${'/role/' + role.id + '/user'})"></div>
                    </div>
                </div>
            </th:block>
        </th:block>
    </th:block>
</th:block>

<!-- add Modal -->
<div class="modal fade" id="addPermModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择权限</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-offset-6 col-sm-6">
                        <span class="input-group pull-right">
                            <input type="text" class="form-control" id="search-perm-text" />
                            <span class="input-group-addon"><i class="fa fa-search" id="search-perm-btn"></i></span>
                        </span>
                    </div>
                </div>
                <div th:include="fragments/ajax-table :: ajax-table (id=RolePermSelectList, head=${ {'ID', '类型', '权限名称', '描述'} }, ajaxurl='/perm')"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择用户</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-offset-6 col-sm-6">
                        <span class="input-group pull-right">
                            <input type="text" class="form-control" id="search-user-text" />
                            <span class="input-group-addon"><i class="fa fa-search" id="search-user-btn"></i></span>
                        </span>
                    </div>
                </div>
                <div th:include="fragments/ajax-table :: ajax-table (id=RoleUserSelectList, head=${ {'ID', '手机', '邮箱', '姓名', '状态'}  }, ajaxurl='/user')"></div>
            </div>
        </div>
    </div>
</div>